/**
* Created by tanyichao on 2017/4/10.
*/
<template>
    <div class="routerContent phoneValidaContainer">
        <!--<x-header>手机验证</x-header>-->
            <div class="content">
                <div class="title">需要验证一下您的手机号码</div>
                <div class="info">
                    <x-input v-model="telnumber" :is-type="isPhone" class="phone"  type="number" placeholder="请输入您的手机号码"></x-input>
                    <div class="getVCode btn" :style="{ 'background-color': (timeflag == 1) ?  '#6C6C6E' : '#FC8672'}" @click="registsend">获取验证码 <span v-if="timeflag == 1 ">({{time}})</span></div>
                    <x-input v-model="phonenumber" :is-type="isVCode" class="phone"   type="number" placeholder="输入验证码"></x-input>
                    <div class="next btn" @click="nexttat">下一步</div>
                </div>
            </div>
    </div>
</template>
<script>
    import {XHeader, Scroller, XInput} from 'vux'
    import {registsendService,registVerifyService} from '../services'
    import {mapState, mapActions} from 'vuex'
    export default {
        components: {
            XHeader,
            Scroller,
            XInput
        },
        mounted(){
        },
        watch: {},
        data(){
            return {
                isPhone(value){
                    return {
                        valid: /^(?=\d{11}$)^1(?:3\d|4[57]|5[^4\D]|7[^249\D]|8\d)\d{8}$/.test(value),
                        msg: 'no phone'
                    }
                },
                isVCode(value){
                    return {
                        valid: /^[0-9]*[1-9][0-9]*$/.test(value),
                        msg: 'no no'
                    }
                },
                telnumber:"",
                authCode:"",
                timeflag:"",
                time:"",
                phonenumber:"",
            }
        },
        created(){
        },
        computed: {
            ...mapState({
                isPositionValue: state => state.vux.isPositionValue,
                isPositionValueText: state => state.vux.isPositionValueText,
            }),
        },
        methods: {
            ...mapActions([
                'updateIsPositionValue',
                'updateIsPositionValueText',
            ]),
            nexttat(){
                registVerifyService().save({phone:this.telnumber,authCode:this.phonenumber}).then((res) => {
                    if(res.body.code && res.body.code == 200){
                        this.$router.replace({
                            name: 'phoneValidaSucc',
                            query: {}
                        })
                    }else{
                        this.updateIsPositionValueText(res.body.msg);
                        this.updateIsPositionValue(true);
                    }
                })
            },
            registsend(){
                if(this.timeflag == 1 || this.telnumber=="" || this.telnumber.length!=11) return;
                let timerval = null;
                this.time = 60;
                timerval = setInterval( () => {
                    this.time--;
                    if(this.time>0){

                    }else{
                        this.timeflag = "";
                        clearInterval(timerval);
                    }
                },1000);

                this.timeflag = 1;
                registsendService().save({phone:this.telnumber}).then((res) => {
                    if(res.body.code && res.body.code == 200){
                        this.authCode = res.body.data.authCode;
                        this.updateIsPositionValueText("短信已发送，请留意接收");
                        this.updateIsPositionValue(true);
                    }
                })
            },
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    .phoneValidaContainer {
        .content {
            height: 100%;
            .title {
                width: 100%;
                height: 2.2rem;
                line-height: 2.2rem;
                font-size: 0.75rem;
                text-align: center;
                background: #FC8672;
                color: #fff;
            }
            .info {
                padding: 1rem;

                .phone{
                    width: 100%;
                    height: 2.2rem;
                    font-size: 0.75rem;
                    border: 1px solid #e7e7e7;
                    background-color: #e7e7e7;
                    border-radius: 5px;
                }
                .btn{
                    width:100%;
                    height: 2.2rem;
                    margin: 0.5rem 0;
                    font-size: 0.75rem;
                    text-align: center;
                    line-height: 2.2rem;
                    border-radius: 5px;
                }
                .getVCode{
                    background-color: #FC8672;
                    color: #fff;
                }
                .next{
                    background-color: #f6ab3f;
                    color: #fff;
                    border: 1px solid #f6ab3f;
                }

            }
        }

    }
</style>
